<template>
  <div id="app">
    
	<!-- 登录注册切换 -->
	<div class="title">
    <router-link to="/login">登录</router-link> | 
    <router-link to="/register">注册</router-link>
    </div>
	
	<!-- 背景图 -->
    <img @click="ImgChange(0)" class="bg" :class="{bg_img:bgfilter}" :src="bgd_img">
    
	<!-- 注册框 -->
	<div id="login">
    	<img  class="login_img"  :src="header_img" />
        <input @click="ImgChange(1)" v-model="register_msg.userid" name="userid" type="text" placeholder="用户id" />
		<input @click="ImgChange(1)" v-model="register_msg.username" name="username" type="text" placeholder="用户名" />
		<input @click="ImgChange(1)" v-model="register_msg.password" name="password" type="password" placeholder="密码" />
		<select @click="ImgChange(1)" v-model="register_msg.gender" name="gender">
			<option disabled value="">性别</option>
			<option value="男">男</option>
			<option value="女">女</option>
		</select>
		<input @click="ImgChange(1)" v-model="register_msg.age" name="age" type="number" placeholder="年龄" />
		<input @click="ImgChange(1)" v-model="register_msg.email" name="email" type="text" placeholder="邮箱" />
    	<button @click="register">注册</button>
    </div>
        
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {

  },
  data(){
  	  return{
  		  bgfilter:false,  //高斯模糊变换标志
          bgd_img:require("../assets/img/login_bgd.jpg"), //背景图片
		  header_img:require("../assets/img/login.png"),   //静态登录头像
		  
		  //注册信息
		  register_msg:{
		  	userid:"",
		  	username:"",
			password:"",
			gender:"",
			age:{
				type:Number,
			},
			email:"",
		  }
  	  }
  },
  methods:{
  	  
//背景图高斯模糊变换
  ImgChange:function(data) {
   if(data)  this.bgfilter = true;
   else  this.bgfilter = false;
  },
	  
   
   //注册
   //判断年龄框是否有输入，没有则默认为0
  register:function(){   
	  
	  var server = this.$myConfig.server
	  
    this.register_msg.age=(this.register_msg.age.length==undefined?0:this.register_msg.age);
	//id正则判断
	var reg=/^[a-z0-9.]*$/gi;
	if(reg.test(this.register_msg.userid)) console.log("只含有数字英文");
	else{
		this.$message.error('用户id只允许包含数字和英文！');
		return false;
	}

    if(this.register_msg.userid !='' && this.register_msg.password != '' &&  this.register_msg.username != ''){
		//定位
		const geolocation = new BMap.Geolocation();
		var _this = this;
		geolocation.getCurrentPosition(function getinfo(position){
		    let province = position.address.province;     //获取省份信息
		    _this.$store.state.UserInfo.province = province;
			
			let data={userid:_this.register_msg.userid,
			          username:_this.register_msg.username, 
			          password:_this.register_msg.password,
			          gender:_this.register_msg.gender,
			          age:_this.register_msg.age,
			          email:_this.register_msg.email,
			   		  province:province
			   			 }
			    _this.$axios({
							 method: 'post',
							 url: server + "/user/register",
							 withCredentials:true,
							 data:data
							 }).then((res)=>{ 
								 console.log(res);
								 console.log(province);
				if(res.data.status == -1){
					_this.timer = setTimeout(()=>{  //设置延迟执行
					  _this.$router.push("/login");
					},1000);
				}
			    else if(res.data.status == 1){
			        _this.$message({
			                 message: '注册成功',
			                 type: 'success'
			               });
					_this.timer = setTimeout(()=>{  //设置延迟执行
					  _this.$router.push("/login");
					},1000);
			     }
				 else{
					_this.$message.error('换一个用户id试试叭！');
							}
			    })
				
		  }, function(e) {
			  this.$message.error('定位失败！')
		                 }, {provider: 'baidu'});      
						 
    }
   },  
  }
}
</script>

<style scoped>
	
html,body,#app {
  margin: 0; 
  padding: 0;
  font-family: "Raleway", Arial, Helvetica, sans-serif;
}

.title{
	position: absolute;
	margin: 15px;
}

div > a {
	transition: color 0.2s ease-in-out;
	display: inline-block;
	padding: 0 1.25em;
	text-decoration: none;
	color: #FFF;
}

div > a:hover {
	color: #3498db;
}

.bg_img {
    display: block;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    object-fit: cover;
    transform: scale(1.3);
}
.bg {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all .25s;
    width: 100%;
    z-index: -1;
}

#login {
	opacity: 0.95;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.05);
	border-radius: 10px;
	box-shadow: rgb(0 0 0 / 10%) 0 20px 50px;
	padding: 30px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	transition: all .25s;
	width: 350px;
	text-align: center;
}

.login_img {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	
}

.bgbox.focus{
	filter: blur(10px);
	transform: scale(1.1);
}

input{
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 5px;
	display: block;
	font-size: 14px;
	margin: 15px 0;
	padding: 10px 15px;
	width: 91%;
	transition: border-color .2s;
		
}

select,option{
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 5px;
	display: block;
	font-size: 14px;
	margin: 15px 0;
	padding: 10px 15px;
	width: 100%;
	transition: border-color .2s;
}

button{
	background-color: rgb(102,102,102);
	border-radius: 5px;
	border-style: none;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 16px;
	margin: 15px 0;
	padding: 10px 15px;
	transition: all .25s;
	width: 100%;
}
button:hover {
    filter: brightness(1.1);
}
</style>
